<template>
  <div class="general-container">
    <div class="bigPic">
      <img :src="require(`../assets/general/general-plan${current}.png`)">
      <span class="picName">{{pics[current-1].title}}</span>
    </div>
    <div class="options">
      <div class="opBtn" v-for="pic in pics" :key="pic.index" @click="changePic($event)">
        <img :src="require(`../assets/general/general-plan${pic.index}-small.png`)">
        <i :class="`fa fa-${pic.icon}`"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GeneralPlan',
  data(){
    return{
      pics:[
        {
          index: 1,
          title: '全要素总平',
          icon: 'map-signs'
        },
        {
          index: 2,
          title: '道路分析',
          icon: 'road'
        },
        {
          index: 3,
          title: '人车分流分析',
          icon: 'car'
        },
        {
          index: 4,
          title: '绿化分析',
          icon: 'tree'
        },
        {
          index: 5,
          title: '组团分析',
          icon: 'th-large'
        },
        {
          index: 6,
          title: '公建分析',
          icon: 'building'
        },
      ],
      current: 1
    }
  },
  methods:{
    changePic(e){
      /*使用currentTarget而非target，避免捕获到子元素上*/
      const i = e.currentTarget.number
      const opBtns = document.querySelectorAll('.options > .opBtn')
      const bigPic = document.querySelector('.bigPic')
      opBtns.forEach(element => {
        element.classList.remove('active')
      })
      opBtns[i - 1].classList.add('active')
      bigPic.classList.add('changing')
      setTimeout(()=>{
        this.current = i
      }, 500)
      setTimeout(()=>{
        bigPic.classList.remove('changing')
      }, 1000)
    }
  },
  mounted(){
    const opBtns = document.querySelectorAll('.options > .opBtn')
    opBtns[0].classList.add('active')
    for (let i = 0; i < opBtns.length; i++) {
      opBtns[i].number = i + 1
    }
  }
}
</script>

<style scoped>
.general-container{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  position: relative;
}

.general-container > .bigPic{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.bigPic > img{
  width: 100%;
}

.bigPic.changing{
  animation: changePic 1s linear;
}

.bigPic > .picName{
  position: absolute;
  top: 2vw;
  left: 4vw;
  font-size: 2vw;
  font-weight: 800;
  z-index: 1;
  color: var(--blue);
  text-shadow: 2px 0px 0px var(--green);
}

.options{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: 32rem;
  padding: 0.5rem;
  margin: 2rem 0;
  height: fit-content;
  border-radius: 3.25rem;
  border: 4px dotted var(--dark);
}

.opBtn{
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  margin: 0.5rem;
  overflow: hidden;
  cursor: pointer;
}

.opBtn::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 110%;
  height: 110%;
  opacity: 0.6;
  z-index: 1;
  transition: all 1s;
}

.opBtn > img{
  position: absolute;
  filter: blur(2px);
  transition: all 1s;
}

.opBtn > i{
  z-index: 2;
  font-size: 1.25rem;
  color: white;
  transition: all 1s;
}

.opBtn:nth-child(1)::before{
  background: var(--dark);
}
.opBtn:nth-child(2)::before{
  background: var(--pink);
}
.opBtn:nth-child(3)::before{
  background: var(--yellow);
}
.opBtn:nth-child(4)::before{
  background: var(--green);
}
.opBtn:nth-child(5)::before{
  background: var(--blue);
}
.opBtn:nth-child(6)::before{
  background: var(--purple);
}

.opBtn.active::before{
  opacity: 0;
  transition: all 1s;
}
.opBtn.active > img{
  filter: none;
  transition: all 1s;
}
.opBtn.active > i{
  opacity: 0;
  transition: all 1s;
}

@media screen and (max-width: 767px) {
  .options{
    width: min(22rem, 95vw);
    padding: 0;
    border-radius: 2rem;
  }
  .options > .opBtn{
    width: 2.5rem;
    height: 2.5rem;
  }
}

/*通过透明度变化来掩盖图片切换的突兀感*/
@keyframes changePic {
  45%, 55%{
    opacity: 0;
  }
}

</style>